This chapter covers the development of a simple application which engages users with an interactive poll.
The walkthrough builds on Chapter 2 - it assumes you are familiar with feature blocks and the {% for %} tag.
After completing this chapter you'll be able to integrate interactive polls and common social elements like commenting, be introduced to the {% if %} tag, and understand how to introduce localization in your SML application.
Aquaman Movie Premiere
Aquaman Move Premiere is an example of using polls to gather customer feedback. We'll let fans on Facebook decide which city the highly anticipated summer movie Aquaman will debut it's premiere showing.
The cities from which fans can choose from are San Francisco, Los Angeles, Boston or Chicago. Let's get started!
Adding the Poll Feature Block
- In your SML application, paste in the following code:
{% poll name:"mypolls"%} {% for current_poll in poll.poll_items %} {% capture polltitle %}This week's Poll: {{ current_poll.title }}{% endcapture %} <div id="poll_{{ current_poll.id }}_question"> {{ current_poll.image_url | img_tag:polltitle }} <h3>{{ current_poll.title }}</h3> <form id="poll_{{ current_poll.id }}_form"> <ol> {% for option in current_poll.options %} <li> <input type="radio" name="option" value="{{ forloop.index0 }}" onclick="respond_to_poll({{ current_poll.id }}, {{ forloop.index0 }}); return false;"> <span>{{ option }}</span> </li> {% endfor %} </ol> </form> </div> {% endfor %} {% endpoll %}
- Click "Save Changes". You should now see a new row in the Features table for a "default" poll.
- Click "Configure" under Actions for the poll Feature Block settings.
- Under Your Polls click the "Add New Poll" link and type in the following for the Question Text, Answer. Upload an optional photo and click "Submit".
- At this point we have our poll configured. Click "Return to Facebook Page" to see your changes. You should see something similar to the results below.
- With a few dozen lines of HTML and SML markup we now have an interactive poll. Lets take a minute to break down the code...
First, we are using the {% poll %} Feature Block to specify we want a poll in our application. We've omitted the optional name attribute – the name has been automatically set to default for us.
Next we iterate through the poll items in the block's context variable. This shows the latest, non-hidden polls.
For each poll we show each option with a radio button which when clicked will respond to the poll. We use the index0 attribute on the forloop context variable to get back the current index of our iteration (0 for the first option, 1 for the second, etc.) which we then pass to a built-in javascript helper – respond_to_poll() – along with the current poll's id.
The standard results dialog is shown with the current results.
Adding comments with the facebook_comments social tag
Since we already have the ability to share the poll to our feed via the standard results dialog, let's add the ability to comment on each individual poll.
- Update your code to now read:
{% poll %} {% for current_poll in poll.poll_items %} <div id="poll_{{ current_poll.id }}_question"> <img src="{{ current_poll.image_url }}" alt=""> <h3>{{ current_poll.title }}</h3> <form id="poll_{{ current_poll.id }}_form"> <ol> {% for option in current_poll.options %} <li> <input type="radio" name="option" value="{{ forloop.index0 }}" onclick="respond_to_poll({{ current_poll.id }}, {{ forloop.index0 }}); return false;"> <span>{{ option }}</span> </li> {% endfor %} </ol> </form> </div> <div id="poll_{{ current_poll.id }}_comments"> {% facebook_comments current_poll %} </div> {% endfor %} {% endpoll %} - Click Save Changes then Return to Facebook Fan Page. You should see a comments area under your poll.
We've added a new div container which will house the comments area for each poll. Then, using the facebook_comments social tag, we've specified a wall of comments for the current poll in our iteration of polls.
facebook_comments, like many other social tags, can be passed content managed by a feature block. Here we've added comments to our poll items. We could just as easily add facebook_like or facebook_send in a similar fashion, or use these social tags across other features such as the daily deals in the rss_feed feature block from the prior chapter.
Poll Management
Polls can be managed without code modification.
Adding a Poll - A new poll can be added by selecting 'Add New Poll' in the settings area for the poll feature block. By default, the most recent poll will always show first.
Viewing Results - You can view the results of a poll by selecting 'Poll Results'. The results show both absolute votes as well as relative distribution.
Hiding a Poll - Polls can be hidden, such that they will no longer be shown; The poll.poll_items context variable only returns non-hidden polls. A hidden poll can be unhidden and shown again.
Deleting a Poll - A poll can be remove completely by selecting 'Delete Poll'. This will remove the poll from poll.poll_items as well as remove the configuration and any results.
Familiarize yourself with the above management features by trying them out on your default poll feature block. Start by adding an additional poll, then hiding the original poll. How does the application change as you make these changes?
Adding Localization with the current_locale variable
Since the movie is debuting in North America, the movie studio would like to restrict voting to only english-speaking US audiences.
We can easily add this gating by leveraging the current_locale global context variable in conjunction with the {% if %} tag.
- Update your SML code to now read:
{% if current_locale == "en_US" %} {% poll %} {% for current_poll in poll.poll_items %} <div id="poll_{{ current_poll.id }}_question"> <img src="{{ current_poll.image_url }}" alt=""> <h3>{{ current_poll.title }}</h3> <form id="poll_{{ current_poll.id }}_form"> <ol> {% for option in current_poll.options %} <li> <input type="radio" name="option" value="{{ forloop.index0 }}" onclick="respond_to_poll({{ current_poll.id }}, {{ forloop.index0 }}); return false;"> <span>{{ option }}</span> </li> {% endfor %} </ol> </form> </div> {% endfor %} {% endpoll %} {% else %} The Aquaman Movie Premiere Poll is only available to North American Fans {% endif %}
Introduction to the if tag
Like any modern programming language, SML has support for if/else, often called conditional logic.
The if/else tag allows you to introduce dynamic control flow into your applications. We use it here to check the value of the user's locale and display content appropriately.
The tag takes a single argument, an expression that returns a boolean value. An expression can either be a boolean variable or a statement that uses one of the boolean logic operators (==, !=, or, and, etc.) to compare values.
Next Steps
You've now built an application that serves an interactive poll to US audiences. Take a look at the links below to read up more about the poll feature block. Try experimenting with a different presentation of the options and see if you can change out the standard results experience. content_comments has many options you can customize, see if you can remove the metadata around each comment.
poll
content_comments
Global Context Variables
On to Chapter 4
20100917-m3efjsnm392btimb4i5jme28ea.jpg (image/jpeg)
20100917-c9px2fm8p9siktj57ic9c5u4rb.jpg (image/jpeg)
20100917-cxjmj59br2xcsf7bac3wpnqahy.jpg (image/jpeg)
20100917-gm5dnr1449xshjg26d8nywst1s.jpg (image/jpeg)
20100917-8mnas5h4chqb4bm43s188n1n6w.jpg (image/jpeg)
20110110-t6iuiq86kgwd3986hyx15gnaew.jpg (image/jpeg)
